<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
        <a href="/">网格地图管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>下拉框定位地图</el-breadcrumb-item>
    </el-breadcrumb>

    
    <div class="common-layout">
        <el-container>
        <el-aside width="200px">
            <div style="margin: 20px 3px;">
                <el-select v-model="address" placeholder="请选择区域" @change="toMap">
                    <el-option label="北京天安门" value="北京天安门" />
                    <el-option label="上海东方明珠" value="上海东方明珠" />
                    <el-option label="广州塔" value="广州塔" />
                    <el-option label="深圳世界之窗" value="深圳世界之窗" />
                </el-select>
            </div>
        </el-aside>
        <el-main>
            <baidu-map class="bm-view" :zoom="18" :center="center" >
            </baidu-map>
        </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
    import {ref,reactive} from 'vue';

    const address=ref("");
    const center=reactive({lng: 116.404, lat: 39.915});
    //判断选择的地址
    const toMap=()=>{
        if(address.value=='北京天安门'){
            center.lng=116.403963
            center.lat=39.915119
        }
        else if(address.value=='上海东方明珠')
        {
            center.lng=121.506379
            center.lat=31.245414
        }
        else if(address.value=='广州塔')
        {
            center.lng=113.331075
            center.lat=23.112047
        }
        else if(address.value=='深圳世界之窗')
        {
            center.lng=113.979399
            center.lat=22.540746
        }   
    }

</script>


<style>
    .bm-view {
        width: 100%;
        height: 600px;
    }
</style>